<template>
  <svg 
    @click="toggleFullscreen"
    class="fullscreen-svg-icon" 
    :class="{ 'fullscreen-active': isFullscreen }"
    :style="{ '--icon-color': iconColor, '--hover-color': hoverColor }"
    viewBox="0 0 24 24" 
    fill="none" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round"
    :title="isFullscreen ? '退出全屏' : '进入全屏'"
  >
    <!-- Enter Fullscreen paths (corners pointing outwards) -->
    <template v-if="!isFullscreen">
      <path d="M1 6V1H6" />
      <path d="M18 1H23V6" />
      <path d="M1 18V23H6" />
      <path d="M23 18V23H18" />
    </template>

    <!-- Exit Fullscreen paths (corners pointing inwards) -->
    <template v-else>
      <path d="M6 1H1V6" />
      <path d="M23 6V1H18" />
      <path d="M6 23H1V18" />
      <path d="M18 23H23V18" />
    </template>
  </svg>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// Props for custom colors
interface Props {
  iconColor?: string
  hoverColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  iconColor: '#333333',
  hoverColor: '#409eff'
})

const isFullscreen = ref(false)

// 切换全屏状态
const toggleFullscreen = async () => {
  try {
    if (!document.fullscreenElement) {
      // 进入全屏
      await document.documentElement.requestFullscreen()
    } else {
      // 退出全屏
      await document.exitFullscreen()
    }
  } catch (error) {
    console.error('全屏操作失败:', error)
    alert('全屏操作失败，请检查浏览器支持')
  }
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
  // Add/remove a class to the body for global fullscreen styling
  if (isFullscreen.value) {
    document.body.classList.add('fullscreen')
  } else {
    document.body.classList.remove('fullscreen')
  }
}

// 组件挂载时添加事件监听
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  // 初始化状态
  isFullscreen.value = !!document.fullscreenElement
  if (isFullscreen.value) {
    document.body.classList.add('fullscreen')
  }
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
  document.body.classList.remove('fullscreen') // Ensure class is removed on unmount
})
</script>

<style scoped>
.fullscreen-svg-icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  stroke: var(--icon-color);
}

.fullscreen-svg-icon.fullscreen-active {
  stroke: var(--icon-color);
}

/* Hover effects */
.fullscreen-svg-icon:hover {
  stroke: var(--hover-color);
  transform: scale(1.1);
}

.fullscreen-svg-icon:hover.fullscreen-active {
  stroke: var(--hover-color);
}

/* 全屏状态下的样式 */
:global(.fullscreen) .fullscreen-svg-icon {
  stroke: var(--icon-color);
}

:global(.fullscreen) .fullscreen-svg-icon.fullscreen-active {
  stroke: var(--icon-color);
}

:global(.fullscreen) .fullscreen-svg-icon:hover {
  stroke: var(--hover-color);
}

:global(.fullscreen) .fullscreen-svg-icon:hover.fullscreen-active {
  stroke: var(--hover-color);
}
</style>